<template>
	<view class="wrap">
		<view v-show="loadingState" class="loading-state">
			<u-skeleton
				    rows="4"
				    title
					loading
					:animate="true"
					avatar
				></u-skeleton>
		</view>
		<view class="list">
			<view class="item" v-for="item in list">
				<blogItem :item="item"></blogItem>
			</view>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database();
	import blogItem from '@/components/blog-item/blog-item.vue';
	export default {
		components:{
			blogItem
		},
		data() {
			return {
				list:[],
				loadingState:true,
			};
		},
		onLoad() {
			this.getData()
		},
		methods:{
			// 获取列表数据
			getData(){
				let artTemp = db.collection("circle-articles").where(`user_id==$cloudEnv_uid`).field("user_id,title,description,picUrls,view_count,like_count,comment_count,publish_date").getTemp();
				let userTemp = db.collection("uni-id-users").field("_id,username,nickname,avatar_file").getTemp();
				db.collection(artTemp,userTemp).orderBy('publish_date',"desc").get().then(res=>{
					this.list = res.result.data;
					this.loadingState = false;
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.loading-state{
		padding: 30rpx;
	}
	.list{
		.item{
			padding: 30rpx;
			border-bottom: 12rpx solid #f8f8f8;
		}
	}
</style>
